<template>
  <view class="search">
    <!-- 搜索组件 -->
    <u-search
      placeholder="输入商品名"
      v-model="keyword"
      :action-style="{
        backgroundColor: '#ea4350',
        color: '#fff',
        height: '64rpx',
        lineHeight: '64rpx',
        borderRadius: '15rpx',
      }"
      @custom="handleSearch"
    ></u-search>
    <!-- 商品列表 -->
    <view class="search-list u-m-t-10">
      <navigator
        v-for="item in goods"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
      >
        <view class="goods-img-wrap">
          <u-image
            :src="
              item.goods_small_logo ||
              'https://img2.baidu.com/it/u=1852786483,3450763574&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=520'
            "
            width="191"
            height="191"
          ></u-image>
        </view>
        <view class="goods-info-wrap">
          <view class="goods_name u-line-2">{{ item.goods_name }}</view>
          <view class="goods_price">¥{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      goods: [],
    };
  },
  methods: {
    // 处理点击搜索事件
    handleSearch() {
      // console.log(this.keyword);
      // 根据关键字来搜索商品
      this.getGoodsList(this.keyword);
    },

    // 根据关键字来搜索商品
    // 这个接口是用来实现  第二种 搜索中心业务
    async goodsQsearch(query) {
      // const result = await this.$u.get('/goods/qsearch', { query });
      // console.log(result);
    },

    // 根据关键字来搜索商品
    // 这个接口是用来实现  第一种 搜索中心业务
    async getGoodsList(query) {
      const params = {
        query: query,
        cid: '',
        pagenum: 1,
        pagesize: 20,
      };
      const result = await this.$u.get('/goods/search', params);
      this.goods = result.message.goods;
    },

  },
};
</script>

<style lang="scss">
.search {
  padding: 15rpx;
}
.search-list {
  navigator {
    display: flex;
    .goods-img-wrap {
      flex: 1;
      padding: 15rpx;
    }
    .goods-info-wrap {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name {
      }
      .goods_price {
        color: red;
        font-size: 30rpx;
      }
    }
  }
}
</style>